<template>
  <div class="app-container">

    <el-form :model="searchObj" ref='searchObj' :inline="true" class="demo-form-inline">
      <el-form-item prop="hosname">
        <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input>
      </el-form-item>
      <el-form-item prop="hoscode">
        <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button @click="resetForm('searchObj')">重置</el-button>
      </el-form-item>
    </el-form>

    <!--工具条 -->
    <div>
      <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
    </div>

    <!-- banner列表 -->
    <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="50%" label="序号" />
      <el-table-column prop="hosname" label="医院名称" />
      <el-table-column prop="hoscode" label="医院编号" />
      <el-table-column prop="apiUrl" label="api基础路径" width="200" />
      <el-table-column prop="contactsName" label="联系人姓名" />
      <el-table-column prop="contactsPhone" label="联系人手机" />
      <el-table-column label="状态" width="80">
        <template slot-scope="scope">
          {{scope.row.status === 1 ? '可用' : '不可用'}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="280px" align="center">
        <template slot-scope="scope">
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeDataBtId(scope.row.id)">删除</el-button>
          <el-button v-if="scope.row.status == 1" type="primary" icon="el-icon-star-off" size="mini" @click="lockHospSet(scope.row.id,0)">锁定</el-button>
          <el-button v-if="scope.row.status == 0" type="warning" icon="el-icon-star-off" size="mini" @click="lockHospSet(scope.row.id,1)">取消锁定</el-button>
          <router-link :to="'/hospSet/edit/' + scope.row.id">
            <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          </router-link>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="page" :page-size="limit" :total="total" style="padding: 30px 0; text-align: center;"
      layout="total,prev,pager,next,jumper" @current-change="getList" />
  </div>
</template>

<script>
  //引入接口定义的js文件
  import hospset from '@/api/hospset.js'
  export default {
    //定义变量和初始值
    data() {
      return {
        current: 1, //当前页
        limit: 3, //每页显示记录数
        searchObj: {}, //条件封装的对象
        list: [], //每页数据集合
        total: 0, //总记录数
        page: 1,
        multipleSelection: [], //批量选择中的记录列表
      }
    },
    //在页面渲染之前执行，一般调用methods定义的方法，得到数据
    created() {
      this.getList();
    },
    methods: { //定义方法，进行请求接口调用
      //医院设置列表
      getList(page = 1) { //添加当前页的参数
        this.current = page
        hospset.getHospSetList(this.current, this.limit, this.searchObj)
          .then(response => { //请求成功
            //返回集合赋值给list
            this.list = response.data.records
            this.total = response.data.total
          })
          .catch(error => { //请求失败
            console.log(error);
          })
      },

      //删除医院设置的方法
      removeDataBtId(id) {
        this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //调用接口
          hospset.deleteHospSet(id).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新页面
            this.getList(1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      //批量删除
      removeRows() {
        this.$confirm('此操作将永久删除医院是设置信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          if (this.multipleSelection.length == 0) {
              this.$message({
              message: '请选择你要删除的消息',
              type: 'warning'
            });
            return;
          }

          var idList = [];
          //遍历数组得到每个id值，设置到idList
          for (var i = 0; i < this.multipleSelection.length; i++) {
            var id = this.multipleSelection[i].id;
            idList.push(id);
          }

          //调用接口
          hospset.batchRemoveHospSet(idList).then(response => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //刷新页面
            this.getList(1)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      //获取选择复选框的id值
      handleSelectionChange(selection) {
        this.multipleSelection = selection;
      },

      //锁定与取消锁定
      lockHospSet(id, status) {
        hospset.lockHospSet(id, status)
          .then(response => {
            if (status == 0) {
              this.$message({
                type: 'success',
                message: '锁定成功!'
              });
            }
            if (status == 1) {
              this.$message({
                type: 'success',
                message: '取消锁定成功!'
              });
            }
            //刷新页面
            this.getList(1)
          }).catch((error) => {
            console.log(error);
          })
      },

      //表单清空
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
</style>
